<route lang="json">
{
  "meta": {
    "title": "who we serve"
  }
}
</route>
<script setup lang="ts">
import { _require } from "@@/utils/tools/index";
import { useInView } from "@@/hooks/toolsHooks";
import { inTopGroup } from "@@/common/js/animation";
import svg2 from "@@/common/svgAnimation/2";
import svg3 from "@@/common/svgAnimation/3";
import svg6 from "@@/common/svgAnimation/6";
import svg17 from "@@/common/svgAnimation/17";
import svg18 from "@@/common/svgAnimation/18";
import { ECOption } from "@@/components/rework/Recharts/index";
import barData from "./barData.json";
import pieData from "./pieData.json";
import tableData from "./tableData.json";
import { funDelay } from "@@/utils/tools/function";

const { vInView } = useInView();
const route = useRoute();

const h1Spans = computed(() => {
  const queryTitle = (route.query?.title || "who we serve") as string;
  return queryTitle.split(" ");
});

const img = computed(
  () =>
    (route.query.img || _require("src/assets/images/desplay/6.jpg")) as string
);
const title = import.meta.env.VITE_GLOB_APP_TITLE;

const summarize = computed(() => [
  {
    content: "Investors who demand a flat return",
  },
  {
    content: "Investors who can take moderate risk",
  },
  {
    content: "Long-term investors",
  },
  {
    content: "Investors interested in international money markets",
  },
]);

const barLoad = ref(false);
const barOption = computed<ECOption | undefined>(() => {
  if (!barLoad.value) return;
  const option: ECOption = {
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}%",
    },
    series: [
      {
        type: "bar",
        data: barData.map((v) => ({
          value: v.value,
          itemStyle: {
            color: v.value > 0 ? "#02C499" : "#FF6D60",
          },
        })),
        label: {
          show: true, //开启显示
          position: "top", //在上方显示
          formatter: "{c}%", //显示百分号
        },
      },
    ],
    xAxis: {
      type: "category",
      data: barData.map((v) => v.date),
    },
    yAxis: {
      type: "value",
      max(v) {
        return v.max;
      },
      min(v) {
        return v.min;
      },
      axisLabel: {
        formatter: "{value}%",
      },
    },
    dataZoom: {
      type: "inside",
      startValue: 0,
      endValue: 10,
    },
  };
  return option;
});

const leftBarsData = [
  {
    title: "Return On Investment",
    label: ["Annual return", "Profit share", "Maximum benefit"],
    data: [89, 71, 4.56],
  },
  {
    title: "Risk index",
    label: ["Maximum risk", "Loss ratio", "Maximum loss"],
    data: [45, 29, 2.54],
  },
];
const leftBarLoad = ref(false);
function leftBar(title: string, label: string[], data: any[]) {
  if (!leftBarLoad.value) return;
  const option: ECOption = {
    series: {
      type: "bar",
      data,
      label: {
        show: true, //开启显示
        position: "right", //在上方显示
        formatter: "{c}%", //显示百分号
      },
    },
    title: {
      text: title,
    },

    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}%",
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      max(v) {
        return v.max;
      },
      min(v) {
        return v.min;
      },
      axisLabel: {
        formatter: "{value}%",
      },
    },
    yAxis: {
      type: "category",
      data: label,
      axisLabel: {
        formatter(value) {
          return value.split(" ").join("\n");
        },
      },
    },
    grid: {
      left: "15%",
    },
  };
  return option;
}

const rightPieLoad = ref(false);
const rightPie = computed<ECOption | undefined>(() => {
  if (!rightPieLoad.value) return;
  const option: ECOption = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}:({c}%)",
    },
    legend: {
      orient: "horizontal",
      top: "top",
    },

    series: [
      {
        name: "Proportion",
        type: "pie",
        radius: "60%",
        center: ["50%", "60%"],
        data: pieData,
        label: {
          formatter: "{b}:({c}%)",
        },
      },
    ],
  };
  return option;
});
</script>

<template>
  <CpageView class="auto-MT-lg Mcol-lg">
    <!-- 一栏 -->
    <ElRow class="ML-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="10">
        <div v-in-view:once="(e) => inTopGroup(e.target)" class="MR-lg">
          <h1>
            <span v-for="text in h1Spans" in-top>
              {{ text }}<span>&nbsp;</span>
            </span>
          </h1>
          <div class="T-weak MT-sm">
            <p in-top>
              Whether you work for a bank, an investment firm, or other
              financial institution, blockchain allows you to embed central bank
              digital currencies, programmable money, and other tokenised assets
              into your businesses. It can enable the exchange of information
              and assets more securely and cost-effectively.
            </p>
            <p class="MT-xs" in-top>
              Your challenge is how to implement it simply, while protecting
              your existing IT investments.
            </p>
            <h4 class="MT-xs T-M1" in-top>
              Ready to take your first steps into the future?
            </h4>
          </div>
          <RouterLink :to="{ name: 'howWeDoIt-strategySystem' }">
            <ElButton
              class="MT-md"
              in-top
              :type="'primary'"
              :size="'large'"
              plain
            >
              How we do it
            </ElButton>
          </RouterLink>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="14">
        <ElImage class="part-1_image" :src="img" :fit="'cover'" />
      </ElCol>
    </ElRow>
    <!-- 二栏 -->
    <div
      v-in-view:once="(e) => inTopGroup(e.target)"
      class="Mrow-xxl MT-xxl T-A-C auto-MT-sm"
    >
      <h2>
        <span class="T-M1" in-top>Profit<span>&nbsp;</span> </span>
        <span in-top>distribution</span>
      </h2>
      <p in-top class="T-weak">
        Monthly trading profits will be divided on an 80/20 basis
      </p>
      <p in-top class="T-weak">
        <span>Investors:</span> <span class="T-strong T-M1">80% </span>
        <span>traders:</span> <span class="T-strong T-M1">20%</span>
      </p>
      <Csummarize class="T-A-C MT-md">
        <CsummarizeItem v-for="item in summarize">
          <p>{{ item.content }}</p>
        </CsummarizeItem>
      </Csummarize>
    </div>
    <!-- 三栏 -->
    <div
      v-in-view:once="(e) => inTopGroup(e.target, '.in-top')"
      class="Mrow-xxl MT-xxl T-A-C auto-MT-sm"
    >
      <h2>
        <span class="in-top">Cooperation<span>&nbsp;</span></span>
        <span class="T-M1 in-top">plan</span>
      </h2>
      <div class="MT-md">
        <el-table
          row-class-name="in-top"
          :data="tableData"
          :table-layout="'auto'"
          stripe
          border
        >
          <el-table-column prop="level" label="Agent level" />
          <el-table-column prop="balance" label="Personal net savings" />
          <el-table-column
            prop="directPerformance"
            label="Direct performance"
          />
          <el-table-column
            prop="owningPerformance"
            label="Owning performance"
          />
          <el-table-column prop="spreadRebate" label="Spread rebate" />
          <el-table-column prop="levelAllowance" label="Level allowance" />
        </el-table>
      </div>
    </div>
    <!-- 四栏 -->
    <div class="Mrow-xxl">
      <h2 v-in-view:once="(e) => inTopGroup(e.target)" class="T-A-C">
        <span in-top>Statement<span>&nbsp;</span></span>
        <span in-top class="T-M1">evaluation</span>
      </h2>
      <Recharts
        class="MT-lg"
        v-in-view:once="() => funDelay(() => (barLoad = true), [], 500)"
        :option="barOption"
        height="600px"
      />
    </div>
    <!-- 五栏 -->
    <div class="Mrow-xxl">
      <h2 v-in-view:once="(e) => inTopGroup(e.target)" class="T-A-C">
        <span in-top>Data<span>&nbsp;</span></span>
        <span in-top class="T-M1">statistics</span>
      </h2>
      <ElRow class="MT-lg" :justify="'space-between'" :align="'middle'">
        <ElCol
          v-in-view:once="() => funDelay(() => (leftBarLoad = true), [], 500)"
          :xs="24"
          :span="10"
        >
          <Recharts
            v-for="barData in leftBarsData"
            :option="leftBar(barData.title, barData.label, barData.data)"
            height="300px"
          />
        </ElCol>
        <ElCol :xs="24" :span="14">
          <Recharts
            v-in-view:once="
              () => funDelay(() => (rightPieLoad = true), [], 1000)
            "
            :option="rightPie"
            height="600px"
          />
        </ElCol>
      </ElRow>
    </div>
    <!-- 六栏 -->
    <!-- 1左右栏 -->
    <ElRow class="Mrow-xxl MT-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="10">
        <div class="MR-lg" v-in-view:once="(e) => inTopGroup(e.target)">
          <div in-top v-html="svg3.svg"></div>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="14">
        <div v-in-view:once="(e) => inTopGroup(e.target)">
          <h2>
            <span in-top>Minimum risk </span>
            <span in-top>&<span>&nbsp;</span>maximum benefit</span>
          </h2>
          <div class="MT-md auto-MT-sm">
            <p>
              <span in-top>Average monthly return:</span>
              <span>&nbsp;</span>
              <span class="T-strong T-M1" in-top>2-10%</span>
            </p>
            <p>
              <span in-top>Annual return:</span>
              <span>&nbsp;</span>
              <span class="T-strong T-M1" in-top>24-120%</span>
            </p>
            <p>
              <span in-top>Risk index:</span>
              <span>&nbsp;</span>
              <span class="T-strong T-M1" in-top>18.9%</span>
            </p>
            <p>
              <span in-top>Stop loss:</span>
              <span>&nbsp;</span>
              <span class="T-strong T-M1" in-top>30%</span>
            </p>
          </div>
        </div>
      </ElCol>
    </ElRow>
    <!-- 2左右栏 -->
    <ElRow class="Mrow-xxl MT-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="14">
        <div class="MR-lg" v-in-view:once="(e) => inTopGroup(e.target)">
          <h2>
            <span in-top>Capital<span>&nbsp;</span></span>
            <span in-top>Preservation</span>
            <br />
            <span in-top>& <span>&nbsp;</span></span>
            <span in-top>Protection</span>
          </h2>
          <div class="MT-md auto-MT-sm">
            <p in-top>Investors' money is at risk System policy protection.</p>
            <p in-top>
              Our exchange Easy manager's daily operation by experience Abundant
              trading supervisor for supervision .
            </p>
            <p in-top>
              The trading team assures investors Capital in all portfolios Not
              less than 40 of its initial capital %. And put each investor's
              stop The loss point will be set at 30%.
            </p>
          </div>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="10">
        <div v-in-view:once="(e) => inTopGroup(e.target)">
          <div in-top v-html="svg18.svg"></div>
        </div>
      </ElCol>
    </ElRow>
    <!-- 3左右栏 -->
    <ElRow class="Mrow-xxl MT-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="12">
        <div class="MR-lg" v-in-view:once="(e) => inTopGroup(e.target)">
          <div in-top v-html="svg6.svg"></div>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="12">
        <div v-in-view:once="(e) => inTopGroup(e.target)">
          <h2>
            <span in-top>Capital<span>&nbsp;</span></span>
            <span in-top>markets</span>
          </h2>
          <div class="MT-md auto-MT-sm">
            <p in-top>
              Assets of all kinds – both physical and digital – are being
              tokenised. Issuers are gaining access to entire new pools of
              liquidity, while investors are diversifying their portfolios in
              ways they could only dream of just a few years ago.
            </p>
          </div>
        </div>
      </ElCol>
    </ElRow>
    <!-- 4左右栏 -->
    <ElRow class="Mrow-xxl MT-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="12">
        <div class="MR-lg" v-in-view:once="(e) => inTopGroup(e.target)">
          <h2>
            <span in-top> Fund </span>
            <br />
            <span in-top> security </span>
          </h2>
          <div class="MT-md auto-MT-sm">
            <p in-top>
              Strategic partner broker will be the investor's place There are
              funds allocated to separate segregated accounts.
            </p>
            <p in-top>
              The main purpose of segregated accounts is to prevent brokers Use
              client funds for any other purpose, from And to ensure the safety
              and security of funds.
            </p>
            <p in-top>
              Segregated accounts also help minimize this Investors face broker
              problems.
            </p>
          </div>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="12">
        <div v-in-view:once="(e) => inTopGroup(e.target)">
          <div in-top v-html="svg17.svg"></div>
        </div>
      </ElCol>
    </ElRow>
    <!-- 5左右栏 -->
    <ElRow class="Mrow-xxl MT-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="12">
        <div class="MR-lg" v-in-view:once="(e) => inTopGroup(e.target)">
          <div in-top v-html="svg2.svg"></div>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="12">
        <div v-in-view:once="(e) => inTopGroup(e.target)">
          <h2>
            <span in-top> Strategy </span>
            <br />
            <span in-top>&<span>&nbsp;</span></span>
            <span in-top>valuation</span>
          </h2>
          <div class="MT-md auto-MT-sm">
            <p in-top>
              Through the data to calculate the winning rate is greater The
              strategy and repeated to achieve To better performance, real-time
              updates With supervision, the benefits and risks will be reached
              Balance is at the core
            </p>
          </div>
        </div>
      </ElCol>
    </ElRow>
  </CpageView>
</template>

<style lang="scss" scoped></style>
